<template>
	<view>
		<view class="player"
		@tap="handleNavigateToAudioPlay" 
		>
		    <view class="player_info">
		        <view class="player_info_image">
		            <image mode="widthFix"  :src="musicInfo.playingImg"/>
		        </view>
		        <view class="player_info_name">
		            <text class="textone" >{{musicInfo.playingName}}</text>
		            <text class="texttwo" >{{musicInfo.playingAuthor}}</text>
		        </view>
		    </view>
		</view>
		<view class="isplay" @tap="isplayer" >
		    <image   :src="zzPlay?'../../../static/playing/ajd.png' : '../../../static/playing/ajf.png'"  mode="widthFix"/>
		</view>	
	</view>
</template>

<script>
	let audioCtx=uni.getBackgroundAudioManager();
	import { mapState } from 'vuex';
	let  app =getApp();
	export default {
		data() {
			return {
			}
		},
		computed: {
			...mapState(['Id','zzPlay','idInfo','musicInfo']),
		},
		methods: {
			//返回播放器
			handleNavigateToAudioPlay(){
			  uni.navigateTo({
				url: '../playing/playing?playId='+this.Id+'&playListId='+this.idInfo.playListId+'&aid='+this.idInfo.albumListId+'&daySongId='+this.idInfo.daySongId,
			  })
			},
			//播放暂停事件
			isplayer(){
				let {zzPlay}=this;
				if(zzPlay){	
					audioCtx.pause();
				}
				else{
					audioCtx.play();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.player{
	    width: 100%;
	    height: 100upx;
	    background-color:#484848;
	    opacity: 0.95;
	    display: flex;
	    padding: 10upx;
	    .player_info{
	        flex: 1;
	        display: flex;
	        align-items: center;
	        .player_info_image{
	            margin-top: 10upx;
	            width: 80upx;
	            image{
	                width: 100%;
	            }
	        }
	        .player_info_name{
	            width: 400upx;
	            padding-left: 15upx;
	            color: #ffffff;
	            display: flex;
	            flex-direction: column;
	            justify-content: center;
	            font-weight: 400;
	            .textone{
	                font-size: 24upx;
	                font-weight: 400;
	                display: -webkit-box;
	                overflow: hidden;
	                -webkit-box-orient: vertical;
	                -webkit-line-clamp: 1;
	            }
	            .texttwo{
	                padding-top: 10upx;
	                font-size: 20upx;
	            }
	        }
	    }
	}
	.isplay{
	    position: absolute;
	    z-index: 99;
	    width: 70upx;
	    top: 15upx;
	    right: 60upx;     
	    image{
	        width: 100%;
	    }
	}
</style>
